<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>产品信息统计</title>
<script src="${ctx}/decorators/js/plugins/layer/laydate/laydate.js"></script>
<script src="${ctx}/assert/js/echarts-all.js"></script>

</head>
<body>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>产品数据统计</h5>
				</div>
				<div class="ibox-content">
					<form class="form-horizontal" name="myform" id="myform">
						<div class="form-group">
							<label class="col-sm-2 control-label"><h4>商家名称:</h4></label>
							<div class="col-lg-3">
								<select class="form-control input-lg pull-left" name="vendorNameList"
									onchange="changeProduct();" id="vendorNameList">
									<c:forEach var="vendor" items="${vendorList}"
										varStatus="status">
										<option value="${vendor.id}">${vendor.VName}</option>
									</c:forEach>
								</select>
							</div>
							<label class="col-sm-2 control-label" ><h4>产品名称:</h4></label>
							<div class="col-lg-3">
								<select class="form-control input-lg" name="productNameList"
									id="productNameList" onchange="changeStatistic();">
								</select>
							</div>

						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="row">


				
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">总</span>
                        <h5>二维码总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="font-bold" id="qrcodeCount"></h1>
                        <small>二维码</small>
                    </div>
                </div>
            </div>
				
				
				
	            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">总</span>
                        <h5>已扫码总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="font-bold"  id="scanQrcodeCount"></h1>
                        <small>扫码总数</small>
                    </div>
                </div>
            </div>			
				
		            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>昨日扫码量 </h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="font-bold"  id="yesterdayScanrecordCount"></h1>
                        <small>扫码量</small>
                    </div>
                </div>
            </div>			
			</div>


	<div class="row">
		<div class="col-lg-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title" style="min-height: 60px">
					<div class="pull-right">
						<div class="btn-group">
							<button type="button" id="sBtn2" onclick="changeScanChart(7)"
								class="btn  btn-white active">7天</button>
							<button type="button" id="fBtn2" onclick="changeScanChart(15)"
								class="btn  btn-white">15天</button>
							<button type="button" id="tBtn2" onclick="changeScanChart(30)"
								class="btn  btn-white">30天</button>
							<div class="col-sm-3">
								<input id="startDate2"
									class="laydate-icon form-control layer-date" placeholder="开始日期">
							</div>
							<div class="col-sm-3">
								<input class="laydate-icon form-control layer-date"
									id="endDate2" placeholder="结束日期">
							</div>
							<button class="btn btn-success " id="button" type="button"
								onclick="findScanChart();">查询</button>

						</div>
					</div>
				</div>
				<div class="ibox-content" style="height: 400px">
					<div class="row">
						<div class="col-lg-12">
							<div class="flot-chart">
								<div class="flot-chart-content" id="flot-dashboard-chart2"
									style="height: 400px"></div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>





	<!-- Modal -->
	<div class="modal fade" id="alertModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertMessage"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" data-dismiss="modal" class="btn btn-primary">确定</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			changeProduct();

			//			selectChart();

			//外部js调用
			laydate({
				//elem : '#startDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
				event : 'focus' //响应事件。如果没有传入event，则按照默认的click
			});
			//日期范围限制			
			var start = {
				elem : '#startDate2',
				format : 'YYYY-MM-DD',
				min : '2015-6-1', //设定最小日期为当前日期
				max : laydate.now(), //设定最大日期为当前日期
				istime : false,
				istoday : false,
				choose : function(datas) {
					end.min = datas; //开始日选好后，重置结束日的最小日期
					end.start = datas; //将结束日的初始值设定为开始日
				}
			};
			var end = {
				elem : '#endDate2',
				format : 'YYYY-MM-DD',
				max : laydate.now(),//设定最大日期为当前日期
				istime : false,
				istoday : false,
				choose : function(datas) {
					start.max = datas; //结束日选好后，重置开始日的最大日期
				}
			};
			laydate(start);
			laydate(end);
		});

		function changeProduct() {
			var vendorName = $("#vendorNameList option:selected").text();
			$
					.ajax({
						url : "productSearch",
						data : {
							vendorName : vendorName
						},
						type : "POST",
						dataType : 'json',
						success : function(data) {
							if (data.length == 0) {
								$('#alertModal').modal('show')
								document.getElementById("alertMessage").innerHTML = "该厂商未添加产品信息 ";
								//						document.getElementById("button").disabled = true;
							}
							var item = "";
							$.each(data, function(i, result) {
								item += '<option value="'+result['id']+'">'
										+ result['p_name'] + '</option>';
							});
							var div = document
									.getElementById('productNameList');
							div.innerHTML = item;
							changeStatistic();

						}
					});
		}

		function changeStatistic() {
			var id = $("#productNameList option:selected").val();
			$.ajax({
				type : "post",
				url : "statistic",
				data : {
					id : id
				},
				dataType : "json",
				success : function(data) {
				/* 	$("#godCount").html(data.godCount); */
					$("#qrcodeCount").html(data.qrcodeCount);
					$("#scanQrcodeCount").html(data.scanQrcodeCount);
					/* $("#yesterdayGodCount").html(data.yesterdayGodCount); */
					$("#yesterdayScanrecordCount").html(data.yesterdayScanrecordCount);
					changeScanChart(7);
					//changeGodChart(7);
				}
			});
		}

		function findScanChart() {
			var id = $("#productNameList option:selected").val();
			var startDate = $("#startDate2").val();
			var endDate = $("#endDate2").val();
			var Chart = echarts.init(document
					.getElementById("flot-dashboard-chart2"));
			Chart.showLoading({
				text : '正在努力的读取数据中...'
			});
			$.ajax({
				type : "post",
				url : "qrcodeECharts",
				data : {
					id : id,
					startDate : startDate,
					endDate : endDate
				},
				dataType : "json",
				success : function(data) {
					Chart.hideLoading();
					Chart.setOption(data);
				}
			});
		}

		

		function changeScanChart(days) {
			var id = $("#productNameList option:selected").val();
			if (days == 7) {
				document.getElementById('sBtn2').className = "btn  btn-white active";
				document.getElementById('fBtn2').className = "btn  btn-white";
				document.getElementById('tBtn2').className = "btn  btn-white";
			} else if (days == 15) {
				document.getElementById('sBtn2').className = "btn  btn-white";
				document.getElementById('fBtn2').className = "btn  btn-white active";
				document.getElementById('tBtn2').className = "btn  btn-white";
			} else if (days == 30) {
				document.getElementById('sBtn2').className = "btn  btn-white";
				document.getElementById('fBtn2').className = "btn  btn-white";
				document.getElementById('tBtn2').className = "btn  btn-white active";
			}
			var Chart = echarts.init(document
					.getElementById("flot-dashboard-chart2"));
			Chart.showLoading({
				text : '正在努力的读取数据中...'
			});
			$.ajax({
				url : "${ctx}/admin/scanAddECharts",
				type : "post",
				data : {
					'id' : id,
					"days" : days
				},
				dataType : "json",
				success : function(data) {
					Chart.hideLoading();
					Chart.setOption(data);
				}
			});
		}


	</script>
</body>

</html>